<!--
Copyright (c) 2021-2024 SigScalr, Inc.

This file is part of SigLens Observability Solution

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU Affero General Public License for more details.

You should have received a copy of the GNU Affero General Public License
along with this program.  If not, see <http://www.gnu.org/licenses/>.
-->

<!DOCTYPE html>
<html lang="en">

<script async src="https://www.googletagmanager.com/gtag/js?id=G-5SBJC04YFB"></script>
<script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    gtag('config', 'G-5SBJC04YFB');
</script>

<head>
    <meta charset="UTF-8">
    <title>SigLens</title>

    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="apple-touch-icon" sizes="180x180" href="assets/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="assets/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="assets/favicon-16x16.png">
    <link rel="manifest" href="assets/site.webmanifest">
    <link rel="mask-icon" href="assets/safari-pinned-tab.svg" color="#5bbad5">
    <meta name="msapplication-TileColor" content="#da532c">

    <link rel="stylesheet" href="./css/lib/bootstrap.min.css" />
    <link rel="stylesheet" href="./css/lib/all.min.css" />
    <link rel="stylesheet" href="./css/lib/ag-grid.min.css" />
    <link rel="stylesheet" href="./css/lib/tippy.css" />
    <link rel="stylesheet" href="./css/siglens.css?cb={{ AppVersion }}" />
    <link rel="stylesheet" href="./css/query-builder.css?cb={{ AppVersion }}" />
    <link rel="stylesheet" href="./css/metrics-explorer.css?cb={{ AppVersion }}" />
    <style>
        #ui-id-1.ui-widget.ui-widget-content,
        #ui-id-2.ui-widget.ui-widget-content,
        #ui-id-3.ui-widget.ui-widget-content,
        #ui-id-4.ui-widget.ui-widget-content{
            width: 84px !important;
            min-width: 84px;
            font-size: 10px !important;
            height: fit-content;
        }
        #ui-id-1.ui-autocomplete > li > div,
        #ui-id-2.ui-autocomplete > li > div,
        #ui-id-3.ui-autocomplete > li > div,
        #ui-id-4.ui-autocomplete > li > div{
            padding: 0px 9px;
            height: 22px;
        }
    </style>

    <script src="./js/lib/lodash.min.js"></script>
    <script src="./js/lib/jquery-3.6.0.min.js"></script>
    <script src="./js/lib/jquery-ui.min.js"></script>
    <script src="./js/lib/js.cookie.min.js"></script>
    <script src="./js/lib/moment.min.js"></script>
    <script src="./js/lib/date_fns.min.js"></script>
    <script src="./js/lib/popper.min.js"></script>
    <script src="./js/lib/tippy-bundle.umd.min.js"></script>
    <script src="./js/lib/bootstrap.bundle.min.js"></script>
    <script src="./js/lib/ag-grid-community.min.noStyle.js"></script>
    <script src="./js/lib/uuidv4.min.js"></script>
    <script src="./js/lib/chart.umd.min.js"></script>
    <script src="./js/lib/chartjs-adapter-date-fns.bundle.min.js"></script>
    <script src="./js/lib/lucide.min.js"></script>
    <script>
        var defaultTheme = Cookies.get('theme') || 'light';
        $('html').attr('data-theme', defaultTheme);
    </script>
    {{ .RunCheck1 | safeHTML }}
</head>

<body>
    <div id="app-container">

        <div id="app-side-nav">
        </div>

        <div id="dashboard">
            <div id="metrics-container">
                <div class="d-flex justify-content-end">
                    <div class="d-flex">
                        <div>
                            <button class="btn refresh-btn"></button>
                        </div>
                        <div class="dropdown">
                            <button class="btn dropdown-toggle" type="button" id="date-picker-btn" data-toggle="dropdown"
                                aria-haspopup="true" aria-expanded="false" data-bs-toggle="dropdown">
                                <span>Time Picker</span>
                                <i class="dropdown-arrow"></i>
                            </button>
                            <div class="dropdown-menu daterangepicker" aria-labelledby="index-btn" id="daterangepicker ">
                                <p class="dt-header">Search the last</p>
                                <div class="ranges">
                                    <div class="inner-range">
                                        <div id="now-5m" class="range-item ">5 Mins</div>
                                        <div id="now-3h" class="range-item">3 Hrs</div>
                                        <div id="now-2d" class="range-item">2 Days</div>
                                    </div>
                                    <div class="inner-range">
                                        <div id="now-15m" class="range-item">15 Mins</div>
                                        <div id="now-6h" class="range-item">6 Hrs</div>
                                        <div id="now-7d" class="range-item">7 Days</div>
                                    </div>
                                    <div class="inner-range">
                                        <div id="now-30m" class="range-item">30 Mins</div>
                                        <div id="now-12h" class="range-item">12 Hrs</div>
                                        <div id="now-30d" class="range-item">30 Days</div>
                                    </div>
                                    <div class="inner-range">
                                        <div id="now-1h" class="range-item">1 Hr</div>
                                        <div id="now-24h" class="range-item">24 Hrs</div>
                                        <div id="now-90d" class="range-item">90 Days</div>
                                    </div>
                                    <hr>
                                    </hr>
                                    <div class="dt-header">Custom Search <span id="reset-timepicker" type="reset">Reset</span>
                                    </div>
                                    <div id="daterange-from"> <span id="dt-from-text"> From</span> <br />
                                        <input type="date" id="date-start" />
                                        <input type="time" id="time-start" value="00:00" />
                                    </div>
                                    <div id="daterange-to"> <span id="dt-to-text"> To </span> <br />
                                        <input type="date" id="date-end">
                                        <input type="time" id="time-end" value="00:00">
                                    </div>
                                    <div class="drp-buttons">
                                        <button class="applyBtn btn btn-sm btn-primary" id="customrange-btn"
                                            type="button">Apply</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="metrics-explorer">
                   <div id="metrics-queries"></div>
                   <div id="metrics-formula"></div>
                    <div class="mt-3 d-flex ">
                        <button id="add-query" class="btn btn-grey"><span class="plus-icon">+</span> Add Query</button>
                        <button id="add-formula" class="btn btn-grey"><span class="plus-icon">+</span> Add Formula</button>
                    </div>
                </div>
                <hr>
                <div id="visualization-options" class="d-flex mb-3 mt-3">
                    <div>
                      Display : <input id="display-input" type="text" value="Line chart">
                    </div>
                    <div>
                      Color : <input id="color-input" type="text" value="Classic">
                    </div>
                    <div id="line-style-div">
                      Style : <input id="line-style-input" type="text" value="Solid">
                    </div>
                    <div id="stroke-div">
                      Stroke : <input id="stroke-input" type="text" value="Normal">
                    </div>
                </div>
                <hr>
                <div class="mt-3" style="display:flex; flex-direction:row; gap:8px">
                    <div class="graph-view-container btn btn-white">
                        <label class="switch">
                            <input type="checkbox" id="toggle-switch" checked>
                            <span class="slider round"></span>
                        </label>
                        <label class="label" style="margin-left: 6px">One graph per query</label>
                    </div>
                    <button class="btn saveq-btn below-btn-img" id="saveq-btn"></button>
                    <button class="btn add-metrics-to-db-btn below-btn-img" id="add-metrics-to-db-btn" class="mx-3"></button>
                    <button class="btn alert-from-metrics-btn below-btn-img" id="alert-from-metrics-btn"></button>

                    <div class="dropdown download-btn">
                        <button class="btn dropdown-toggle download-all-logs-btn below-btn-img" type="button"
                            data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-bs-toggle="dropdown">
                        </button>
                        <div class="dropdown-menu box-shadow download-options" aria-labelledby="index-btn"
                            id="save-query-options">
                            <li id="csv-block" class="query-language-option">Download as CSV</li>
                            <li id="json-block" class="query-language-option">Download as JSON</li>
                        </div>
                    </div>
                    <div id="save-queries">
                        <p class="validateTips"></p>
                        <form>
                            <fieldset>
                                <input type="text" name="qname" id="qname" placeholder="Name"
                                    class="text ui-widget-content ui-corner-all">
                                <input type="text" name="description" id="description" placeholder="Description (Optional)"
                                    class="text ui-widget-content ui-corner-all">
                                <!-- Allow form submission with keyboard without duplicating the dialog button -->
                                <input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
                            </fieldset>
                        </form>
                    </div>
                </div>
                <div id="metrics-graphs" class="metrics-graph-container mt-4">

                </div>
                <div id="merged-graph-container" style="display: none;" class="mt-4"></div>
            </div>
        </div>


    <div class="popupOverlay"></div>
        <div class="popupContent" id="create-db-popup">
            <h3 class="header mb-2">Add panel to dashboard</h3>
            <p>Choose where to add the panel</p>
            <div class="section-buttons mt-2">
                <div class="section-button active new-dashboard-btn"><a>New Dashboard</a></div>
                <div class="section-button existing-dashboard-btn"><a>Existing Dashboard</a></div>
            </div>
            <div class="new-dashboard">
                <div>
                    <input type="text" placeholder="Name" class="input mt-3" id="db-name">
                    <p class="error-tip">Dashboard name is required!</p>
                    <input type="text" placeholder="Description (Optional)" class="input mt-3" id="db-description">
                </div>
            </div>
            <div class="existing-dashboard">
                <p for="" class="mt-3 mb-3"><small>Select in which dashboard the panel will be created.</small></p>
                <div class="dropdown w-100">
                    <button class="btn dropdown-toggle btn-grey w-100" type="button" id="selected-dashboard" data-toggle="dropdown"
                        aria-haspopup="true" aria-expanded="false" data-bs-toggle="dropdown" >
                        <span>Choose Dashboard</span>
                        <i class="dropdown-arrow"></i>
                    </button>
                    <div class="dropdown-menu box-shadow" aria-labelledby="index-btn" id="dashboard-options">
                    </div>
                </div>
            </div>
            <div class="d-flex align-items-center justify-content-center mt-4">
                <button type="button" id="cancel-dbbtn" class="my-0 btn">Cancel</button>
                <button type="button" id="create-db" class="btn create-db">Create Dashboard</button>
                <button type="button" id="create-panel" class="btn create-db">Create Panel</button>
            </div>
        </div>
    </div>
    <div id="app-footer">
        2024 &copy; SigLens
    </div>

    </div>

    <script src="./js/common.js?cb={{ AppVersion }}"></script>
    <script src="./js/event-handlers.js?cb={{ AppVersion }}"></script>
    <script src="./js/navbar.js?cb={{ AppVersion }}"></script>
    <script src="./js/date-picker.js?cb={{ AppVersion }}"></script>
    <script src="./js/metrics-explorer.js?cb={{ AppVersion }}"></script>
    <script src="./js/saved-query.js?cb={{ AppVersion }}"></script>
    <script src="./js/dashboard-from-logs-metrics.js?cb={{ AppVersion }}"></script>

    {{ .RunCheck2 | safeHTML }}
    {{ .RunCheck3 | safeHTML }}
</body>

</html>